<template>
  <el-container>
    <el-header style="padding: 0px; margin-top: -60px">
      <el-menu style="padding: 0px;" :default-active="activeIndex2" class="el-menu-demo" mode="horizontal"
               @select="handleSelect" background-color="rgb(68,101,145)" text-color="#fff"
               active-text-color="#ffd04b">

        <el-menu-item index="0" style="margin-left: 11rem;" disabled="true">Logo</el-menu-item>
        <el-menu-item v-for="(item,index) in $router.options.routes[0].children" :key="index"
                      v-if="item.show && permit(item.allow)"
                      :index="item.path" :class="$route.path==item.path?'is-active':''">
          <template slot="title">{{ item.name }}</template>
        </el-menu-item>


        <!--          <el-submenu v-for="(item,index) in $router.options.routes" v-if="item.show" :index="index+''">-->
        <!--            <el-menu-item index="0" style="margin-left: 11rem;" disabled="true">Logo</el-menu-item>-->
        <!--            <el-menu-item v-for="(item2,index2) in item.children" v-if="item.show"-->
        <!--                          :index="item2.path" :class="$route.path==item2.path?'is-active':''">-->
        <!--              <template slot="title">{{ item2.name }}</template>-->
        <!--            </el-menu-item>-->
        <!--          </el-submenu>-->


        <!--        <el-menu-item index="2">学生管理</el-menu-item>-->
        <!--        <el-menu-item index="3">学生管理</el-menu-item>-->
        <!--        <el-menu-item index="4">课程管理</el-menu-item>-->
        <!--        <el-menu-item index="5">通知管理</el-menu-item>-->
        <!--        <el-menu-item index="6">资源管理</el-menu-item>-->


        <el-submenu index="8" style="float: right;margin-right: 11rem;">
          <template slot="title">{{ user.userName }}</template>
          <el-menu-item v-if="role != 0" @click="toSetting()">个人设置</el-menu-item>
          <el-menu-item @click="signOut()">退出</el-menu-item>
        </el-submenu>
        <el-menu-item index="7" style="float: right;">
          <template slot="title"><a href="https://www.ele.me"><i
              class="el-icon-chat-dot-round"></i></a></template>
        </el-menu-item>
      </el-menu>
    </el-header>

    <el-main>
      <router-view></router-view>
    </el-main>
    <el-footer style="color: #f4a399;">© 2023
      宇河科技发展有限公司 版权所有
    </el-footer>
  </el-container>
</template>
<script>
export default {
  mounted: function () {
  },
  data() {
    return {
      user: JSON.parse(window.localStorage.getItem('user')),
      role: JSON.parse(window.localStorage.getItem('user')).role
    }
  },
  methods: {
    handleSelect(index) {
      this.$router.push(index)
    },
    toSetting() {
      console.log("个人设置")
      var _this = this;
      if (this.user.role == 0) {
        _this.$router.push('/')
      } else if (this.user.role == 1) {
        _this.$router.push('/updateTeacher')
      } else if (this.user.role == 2) {
        _this.$router.push('/updateStudent')
      }
    }, permit(allow) {
      for (let i = 0; i < allow.length; i++) {
        if (allow[i] == this.role) {
          return true;
        }
      }
      return false;
    },
    signOut() {
      localStorage.removeItem('user')
      location.reload()
    }
  }
}
</script>
<style>

.el-header,
.el-footer {
  background-color: rgb(68, 101, 145);
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-image: url("../assets/login3.png");
  background-size: 100% 100%;
  color: white;
  text-align: center;
  height: 670px;
  width: 100%;
  margin: auto;
}

body {
  margin: 0px;
  padding: 0px;
}

.is-active {
  color: red;
}
</style>

